<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="box">
        <ul class="ul01" id="ul1">
            
        </ul>
    </div>
</body>
</html>
<script src="./js/data.js"></script>
<script>
    
    list1.forEach(function(item,index){
        ul1.innerHTML+=`
        <li idx=${item.id}>
                <img src=${item.urlimg} alt="">
                <h1>${item.txt}</h1>
                <p>${item.pp}</p>
                <span>
                    ${item.price}
                </span>
            </li>
        `
    })
    var list  = document.getElementsByTagName('li')
    console.log(list);
    for(var i=0;i<list.length;i++){
        list[i].onclick=function(){
            console.log(this.getAttribute('idx'));
            
            open('商品详情页.html?id='+this.getAttribute('idx'))
        }
    }
</script>